<template>
  <view class="screen-width container">
    <view class="detail-info">
      <view class="label-title flex space-between items-top">
        <view>发明&nbsp;&nbsp;&nbsp;&nbsp;{{ detailInfo.patentName }}</view>
        <view class="status">{{ detailInfo.patentStatus }}</view>
      </view>
      <view>
        <text>申请号：</text>
        {{ detailInfo.applicationNumber || '--' }}
      </view>
      <view>
        <text>公告号：</text>
        {{ detailInfo.announcementNumber || '--' }}
      </view>
      <view>
        <text>分类号：</text>
        {{ detailInfo.classifyNumber || '--' }}
      </view>
      <view>
        <text>申请日期：</text>
        {{ detailInfo.applicationTime || '--' }}
      </view>
      <view>
        <text>公告日期：</text>
        {{ detailInfo.patentName || '--' }}
      </view>
      <view>
        <text>申请人：</text>
        {{ detailInfo.applicationPeople || '--' }}
      </view>
      <view>
        <text>发明人：</text>
        {{ detailInfo.inventionPeople || '--' }}
      </view>
      <view>
        <text>摘要：</text>
        {{ detailInfo.summary || '--' }}
      </view>
    </view>
    <view class="detail-table">
      <view class="table-head table-cell flex items-middle">
        <view class="free-type">费用种类</view>
        <view class="s-money">应缴金额</view>
        <view class="service">服务费</view>
        <view class="total">总金额</view>
        <view class="time">缴费截止日</view>
      </view>
      <view
        v-for="(item,index) in detailInfo.calculateList"
        :key="index"
        class="table-content table-cell flex"
      >
        <view class="free-type">第{{ item.payYears }}年年费</view>
        <view class="s-money">{{ item.shouldPaymentAmount }}</view>
        <view class="service">{{ item.serviceCharge }}</view>
        <view class="total">{{ item.lumpSum }}</view>
        <view class="time">{{ item.payCloseTime }}</view>
      </view>
    </view>
    <view class="pay-box">
      <view class="pay-btn" @click="toPay">缴费</view>
    </view>
    <Festival></Festival>
  </view>
</template>
<script src="./index.js"></script>
<style lang="less" scoped src="./index.less"></style>